<script setup >
    import { onMounted } from 'vue';
    import * as THREE from 'three';
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
    import { GUI} from 'three/examples/jsm/libs/lil-gui.module.min';
    
    import Stats from 'three/examples/jsm/libs/stats.module.js';
    let stats = new Stats();

    let gui = new GUI();

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    
    const renderer = new THREE.WebGLRenderer();
    // renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setSize( 800, 800 );
    // document.body.appendChild( renderer.domElement );

    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    
    
    camera.position.z = 5;
    
    let clock = new THREE.Clock();
    function animate() {
        requestAnimationFrame( animate );
        // stats.update();
        const delta = clock.getDelta() * 1000;
        // console.log(delta);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;
        
        renderer.render( scene, camera );
    }

    // animate();
    
    let constrols = new OrbitControls(camera, renderer.domElement);
    constrols.addEventListener('change', ()=>{
        renderer.render( scene, camera );
    });

    onMounted(() => {
        document.getElementById('container').appendChild(renderer.domElement);
        // document.getElementById('container').appendChild(stats.dom);
        animate();
    })

</script>

<template>
    <div id="container"></div>
</template>